<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WEB GL</title>
  </head>
  <body>
   <canvas width="300" height="300"></canvas>
    <script>
      // 1. 创建 WebGL 上下文
      const canvas = document.querySelector("canvas");
      const gl = canvas.getContext("webgl");

      // 2. 创建 WebGL 程序（WebGL Program）
      // 顶点着色器
      const vertex = ` 
            attribute vec2 position;
            varying vec3 color;

            void main(){
                gl_PointSize = 1.0; 
                color = vec3(0.5 + position * 0.5, 0.0);
                gl_Position = vec4(position * 0.5, 1.0, 1.0);
            }
        `;
      const vertexShader = gl.createShader(gl.VERTEX_SHADER);
      gl.shaderSource(vertexShader, vertex);
      gl.compileShader(vertexShader);

      // 片元着色器
      const fragment = `
            precision mediump float; 
            varying vec3 color;

            void main(){
                gl_FragColor = vec4(color, 1.0);
            }
        `;
      const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
      gl.shaderSource(fragmentShader, fragment);
      gl.compileShader(fragmentShader);

      // 将shader对象链接到program对象中
      const program = gl.createProgram();
      gl.attachShader(program, vertexShader);
      gl.attachShader(program, fragmentShader);
      gl.linkProgram(program);

      gl.useProgram(program);

      // 步骤三：将数据存入缓冲区 分别对应三角形三个顶点(-1,-1) (0,1) (1,-1)
      const points = new Float32Array([-1, -1, 0, 1, 1, -1]);

      const bufferId = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
      gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);

      // 将缓冲区数据读取到 GPU
      const vPosition = gl.getAttribLocation(program, "position"); //获取顶点着色器中的position变量的地址
      gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0); //给变量设置长度和类型
      gl.enableVertexAttribArray(vPosition); //激活这个变量

      // 步骤五：执行着色器程序完成绘制
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.drawArrays(gl.TRIANGLES, 0, points.length / 2);
    </script>
  </body>
</html>
